<template>
    <el-form :model="form"
             :rules="rules"
             size="mini"
             label-position="left"
             label-width="80px"
             ref="form"
    >

        <el-form-item label="部门" prop="departmentIds">
            <el-select v-model="form.departmentIds" multiple clearable style="width: 100%">
                <el-option v-for="d of departments"
                           :key="d.id"
                           :value="d.id"
                           :label="d.name"
                />
            </el-select>
            <div>当前年龄: {{ age }}</div>
        </el-form-item>

        <el-form-item label="岗位" prop="postIds">
            <el-select v-model="form.postIds" multiple clearable style="width: 100%"/>
        </el-form-item>

    </el-form>
</template>

<script>

    const departments = [
        {
            id: 1,
            name: '技术部',
        },
        {
            id: 2,
            name: '软件部',
        },
        {
            id: 3,
            name: '销售部',
        },
    ];

    export default {
        created() {
            Object.assign(this.form, this.recorder);
        },
        data() {
            return {
                departments,
                form: {
                    departmentIds: [],
                    postIds: [],
                },
                rules: {
                    departmentIds: [
                        {required: true, type: 'array'},
                        {
                            validator: (rule, value, callback) => {
                                if (this.age > 35 && value.includes(2)) {
                                    callback('你太老了，不能在软件部');
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur',
                        }
                    ],
                    postIds: [],
                },
            };
        },
        methods: {
            async validate() {
                await this.$refs.form.validate();
                return Object.assign({}, this.form);
            },
        },
        props: {
            recorder: {
                type: Object,
                default: () => {
                },
            },
            age: {
                type: Number,
            },
        },
    };
</script>
